<template>
	<view class="content">
		<image class="bg-img" src="../../static/index/img3.jpg"></image>
	</view>
	<view class="grades">

		<uni-card>
			搜索内容<uni-search-bar :radius="100" @input="searchAction($event)"></uni-search-bar>
		</uni-card>

		<uni-card title="成绩列表">

			<picker @change="bindPickerChange" :range="array">
				<label>学期：</label>
				<label class="">{{array[index]}}</label>
			</picker>

			<uni-table  v-if="this.islogin==true">
				<uni-tr>
					<view>
						<uni-th align="center">学科</uni-th>
						<uni-th align="center">成绩</uni-th>
						<uni-th align="center">学期</uni-th>
					</view>
				</uni-tr>
				<uni-tr v-if="searchResult.length >0" v-for="(item,index) in this.searchResult" :key="index">
					<view v-if="item.termInfo.termName==num">
						<uni-td align="center">{{item.courseInfo.courseName}}</uni-td>
						<uni-td align="center">{{item.scoreInfo.score}}</uni-td>
						<uni-td align="center">{{item.termInfo.termName}}</uni-td>
					</view>
				</uni-tr>
				<uni-tr v-else v-for="(item,index) in this.result" :key="index">
					<view v-if="item.termInfo.termName==num">
						<uni-td align="center">{{item.courseInfo.courseName}}</uni-td>
						<uni-td align="center">{{item.scoreInfo.score}}</uni-td>
						<uni-td align="center">{{item.termInfo.termName}}</uni-td>
					</view>
				</uni-tr>
			</uni-table>
			<uni-table v-else>
				<uni-tr>
					<view>
						<uni-th align="center">学科</uni-th>
						<uni-th align="center">成绩</uni-th>
						<uni-th align="center">学期</uni-th>
					</view>
				</uni-tr>
			</uni-table>
		</uni-card>
	</view>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				result: [],
				searchResult: [],
				array: ['第一学期', '第二学期', '第三学期', '第四学期', '第五学期', '第六学期'],
				index: 0,
				num: "第一学期",
				studentNum: "",
				Name: "",
				studentname: "",
				islogin: ''

			}
		},
		onLoad() {
			this.StudentName = wx.getStorageSync('myname');
			this.token = wx.getStorageSync('token');
			this.openid = wx.getStorageSync('openid');
			if (this.token || this.openid) {
				this.islogin = true
			} else {
				this.islogin = false
			}
		},
		mounted() {
				this.getScoresAll(),
				this.searchAction()
		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.target.value
				this.jg = this.array[this.index]
				this.num = this.jg
			},

			

			getScoresAll() {
				uni.request({
					url: 'https://backendth.flymi.top/Score?keyword=' + this.StudentName,
					method: 'GET',
					data: {},
					success: res => {
						this.result = res.data.data;
					},
					fail: () => {},
					complete: () => {}
				});
			},
			searchAction(e) {
				const inputValut = e;
				this.searchResult = this.result.filter((item) => {
					if (item.courseInfo.courseName.includes(inputValut)) {
						return item;
					}
				})
			},
		},
	}
</script>

<style>
	.grades {
		opacity: 0.9;
	}

	/deep/ .uni-table {
		min-width: 100% !important;
	}

	.uni-table-th {
		width: 27vw !important;
	}

	.uni-table-td {
		width: 27vw !important;
	}

	.bg-img {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}
</style>
